<template>
	<view class="page" :style="'background:'+nav">
		<view class="bz p-3 top">
			欢迎您
		</view>
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'"  :circular="true" indicator-dots="false"
		 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" 
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperLists" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item bz p-4 px-5 b-radius1" :style="'background: url('+item.backgroundImg+');background-size:cover;'">
					<view class="title">{{item.level}}</view>
					<view class="des py-2">{{item.describe}}</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="bz p-3 top">
			会员权益
		</view>
		<!-- bar -->
		<view class="bz p-3 pt-0" style="padding-bottom: 100rpx;" :style="'background:'+nav">
			<view class=" d-flex flex-wrap" >
				<view class="list_nav my-2" v-for="(item,index) in list" :key="index" >
					<view class="d-flex j-center">
						<image :src="item.equityIcon" class="nav_icon" mode="widthFix"></image>
					</view>
					<view class="list_name py-1 text-center text-1">{{item.equityName}}</view>
					<view class="list_des text-center text-1">{{item.equityDeclare}}</view>
				</view>
				<!-- <view style="height: 100rpx;"></view> -->
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: '/static/index/0.png',
					name:'银会员',
					des:'银会员一年内入住5间夜可升级为 [玫瑰金会员]'
				}, {
					id: 1,
					type: 'image',
					url: '/static/index/1.png',
					name:'玫瑰金会员',
					des:'玫瑰金会员一年内入住10间夜可升级为 [金会员]'
				}, {
					id: 2,
					type: 'image',
					url: '/static/index/2.png',
					name:'金会员',
					des:'金会员一年内入住40间夜可升级为 [铂金会员]'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				nav:'bg',
				list:[],
				name:'',
				swiperLists:[]
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
			
			var that = this;
			// #ifdef  MP-WEIXIN
			for (var i = 0; i < this.swiperList.length; i++) {
				let base64 = wx.getFileSystemManager().readFileSync(this.swiperList[i].url, 'base64');
				that.swiperList[i].url= 'data:image/jpg;base64,' + base64;
			}
			// #endif
			this.name=uni.getStorageSync('user').name;
			this.lisBt();
			
		},
		methods: {
			lisBt(){
				var arr= {
					openId :uni.getStorageSync('user').openId,
							curr:1,
							pageSize:10
						};
					arr=JSON.stringify(arr)
				this.$http({
						url: '/IWeiXinService.queryLevelInfoList',
						method: 'post',
						data: arr
					}).then((res) => {
						console.log(res)
						this.swiperLists=res.data;
						this.nav=this.swiperLists[0].color;
						var bg=this.swiperLists[0].color;						

						this.getinfo(res.data[0].level , bg);
					}).catch((err) => {
						console.log(err)
					
					})
			},
			getinfo(level , bg){
				var arr= {
					curr:1,
					openId :uni.getStorageSync('user').openId,
							pageSize:10,
							level:level
						};
					arr=JSON.stringify(arr)
				this.$http({
						url: '/IWeiXinService.queryLevelEquityList',
						method: 'post',
						data: arr
					}).then((res) => {
						console.log(res)
						if(res.code==0){
							this.list=res.data;
							this.total=res.count
							
							
							uni.setNavigationBarColor({
							    frontColor: '#ffffff',
							    backgroundColor: bg
							})
						}
				
					}).catch((err) => {
						console.log(err)
					
					})
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				console.log(e.detail.current)
				var index=e.detail.current
				this.cardCur = e.detail.current
				this.nav=this.swiperLists[index].color;
				var bg=this.swiperLists[index].color;
				this.getinfo(this.swiperLists[index].level , bg)
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			}
		}
	}
</script>

<style>
	page,.page{
		height: 100%;
	}
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	.top{
		font-size:35rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(239,199,138,1);
	}
	.bg{
		background: #2B3045;
	}
	.card-swiper{
		border-top: 1px solid rgba(255,255,255,.2);
		border-bottom: 1px solid rgba(255,255,255,.2);
	}
	.list_nav{
		width: 25%;
	}
	.nav_icon{
		width: 40rpx;
		height: 40rpx;
		display: block;
	}
	.list_name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(239,199,138,1);
		
	}
	.list_des{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:300;
		color:rgba(239,199,138,1);
	}
	.bg1{
		background:  #39213f;
	}
	.bg2{
		background:  #472a3a;
	}
	.card-swiper uni-swiper-item{
		padding: 20px 0px 20px;
	}
	.title{
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.des{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(0,0,0,.7);
		line-height: 40rpx;
	}
	.wx-swiper-dots .wx-swiper-dot {
	  display: none;
	}
</style>
